/*
 * @Author: hanyu
 * @Date: 2018-05-07 09:46:58 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-12-19 13:53:59
 */
<template>
  <div>
    <div>
      <chart
        id="myBarLineChart"
        :noData="noData"
        :chartStyle="chartStyle ? chartStyle : 'min-height:230px;height:300px'"
        :option="dataOption"
      />
    </div>
  </div>
</template>
<script>
import chart from "./newChart";
import echarts from "echarts";
import _ from "lodash";

/*
单个bar图表 和多个 线图表
value: [
  {
    type: "bar",
    name: "交易额",
    value: [
      {
        name: "1",
        value: 20
      },
      {
        name: "2",
        value: 20
      },
      {
        name: "3",
        value: 20
      },
      {
        name: "4",
        value: 20
      }
    ],
    option: {
    }
  },
  {
    type: "line",
    name: "同比",
    value: [
      {
        name: "1",
        value: 40
      },
      {
        name: "2",
        value: 50
      },
      {
        name: "3",
        value: 10
      },
      {
        name: "4",
        value: 70
      }
    ],
    option: {}
  },
  {
    type: "line",
    name: "环比",
    value: [
      {
        name: "1",
        value: 90
      },
      {
        name: "2",
        value: 100
      },
      {
        name: "3",
        value: 110
      },
      {
        name: "4",
        value: 120
      }
    ],
    option: {}
  }
];
option:{ //echart 的 option
    color:"",柱状图label的颜色
    barBorderRadius: [0,0,0,0]  柱状图的圆角
    startColor:'',
    endColor:'',
    titleUnit: '',//hover 时候的标题单位
}
*/
// const greenCircle =
//   "";
const greenCircle = "";
const lineCircleLowBlue =
  "";
const lineCircleBlue =
  "";
const lineCircle =
  "";
const lineIconArr = [
  greenCircle,
  lineCircleLowBlue,
  lineCircle,
  lineCircleBlue,
  ""
];

const lineColor = [
  "#ff3e9a",
  "#28e787",
  "#00d1ff",
  "#3771ff",
  "#8d4cfd",
  "#28e787",
  "#00d1ff",
  "#3771ff",
  "#8d4cfd"
];

const barColor = [
  {
    startColor: "#00d1ff",
    endColor: "#0c43fd"
  },
  {
    startColor: "#af4cfd",
    endColor: "#6937fd"
  },
  {
    startColor: "#da34fb",
    endColor: "#6937fd"
  }
];
export default {
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    },
    option: {
      type: Object,
      default: () => {
        return {};
      }
    },
    chartStyle: {
      type: String, // 自定义图标宽高
      default: () => {
        return "";
      }
    }
  },
  components: {
    chart
  },
  data() {
    return {
      noData: false,
      dataOption: {}
    };
  },
  watch: {
    value(newValue, oldValue) {
      this.noData = false;
      if (this.value && this.value.length > 0) {
        this.noData = false;
        this.setOption(newValue);
      } else {
        this.$set(this, "noData", true);
        return;
      }
    }
  },
  methods: {
    setOption(res) {
      var unit = "";
      var lineId = 0; // 线的循环id
      const allData = []; // 所有数据
      const seriesLength = res.length; // 数据有多少组
      var legendArr = [];
      var xData = [];
      for (let i = 0; i < seriesLength; i++) {
        const item = res[i];
        const itemData = {
          type: item.type,
          data: []
        };
        var legendItem = {
          name: item.name || item.xData,
          icon: "circle",
          textStyle: {
            color: "#31cee6",
            fontSize: 14,
            padding: [0, 0]
          }
        };
        legendArr.push(legendItem);
        itemData.name = item.name || item.xData;
        if (i === 0) {
          item.value.forEach(itemName => {
            xData.push(itemName.name || itemName.xData);
          });
        }
        if (item.type === "bar") {
          var isStartColor = item.option ? item.option.startColor : undefined;
          var isEndColor = item.option ? item.option.endColor : undefined;
          var isBarBorderRadius = item.option
            ? item.option.barBorderRadius
            : undefined;
          var itemStartColor = isStartColor || barColor[0].startColor;
          var itemEndColor = isEndColor || barColor[0].endColor;
          var barBorderRadius = isBarBorderRadius || [0, 0, 0, 0];
          /* 计算barWidth*/
          var xLength = xData.length; // x轴数据
          var myChartW = document.getElementById("myBarLineChart").offsetWidth;
          var yAxisW = 0;
          var gridLeft = 0;
          var grid = this.option.grid;
          if (grid) {
            gridLeft = grid.left ? grid.left : "8%"; // 左右两边间隙
            yAxisW = (myChartW * Number(gridLeft.replace("%", ""))) / 100;
          } else {
            yAxisW = myChartW * 0.08;
          }
          myChartW = myChartW - yAxisW;
          var barWidth = Math.round(myChartW / xLength / 2); // 为什么除以三，，柱状图与间隙比为1：1, 柱状图 左右有两个间隙
          itemData.barWidth = this.option.barWidth || barWidth;
          /* 计算barWidth 结束*/
          itemData.label = {
            show: false,
            normal: {
              show: false
            }
          };
          itemData.emphasis = {};
          itemData.emphasis.label = {
            show: true,
            position: "top",
            distance: 8, // 距离图形的距离
            textStyle: {
              color: this.option.color || "#00d1ff",
              fontWeight: "bold",
              fontFamily: "DIN Condensed Bold",
              fontSize: "16"
            }
          };
          itemData.itemStyle = {
            normal: {
              barBorderRadius: barBorderRadius,
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                {
                  offset: 0,
                  color: itemStartColor
                },
                {
                  offset: 1,
                  color: itemEndColor
                }
              ])
            }
          };
        } else if (item.type === "line") {
          var isLineIconId = item.option ? item.option.lineIconId : undefined;
          var isColor = item.option ? item.option.color : undefined;
          var lineIcon = isLineIconId
            ? lineIconArr[isLineIconId]
            : lineIconArr[lineId];
          itemData.itemStyle = {
            normal: {
              color: isColor || lineColor[lineId]
            }
          };
          itemData.label = {
            normal: {
              show: false
            }
          };
          itemData.symbol = "image://" + lineIcon;
          lineId++;
        }
        item.value.forEach(itemVal => {
          itemData.data.push(itemVal.value);
        });
        allData.push(itemData);
      }
      var option = {
        dataZoom: [
          {
            show: false,
            bottom: 87,
            zoomLock: true,
            height: 6,
            xAxisIndex: [0],
            start: 0,
            right: 0,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "120%",
            backgroundColor: "#31cee6",
            borderColor: "#3F79F6",
            fillerColor: "#3F79F6",
            handleStyle: {
              color: "#3F79F6",
              opacity: 0
            },
            textStyle: {
              color: "#3F79F6"
            }
          }
        ],
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 45,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        yAxis: {
          name: unit,
          nameGap: 30,
          nameTextStyle: {
            color: "#31cee6"
          },
          axisLabel: {
            margin: 2,
            formatter: value => this.$utils.formatterAxisLabel(value)
          }
        },
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          formatter: params =>
            this.$utils.formatterLine(
              res,
              params,
              this.option.unit || "",
              this.option.titleUnit || ""
            )
        },
        legend: {
          data: legendArr,
          itemGap: 10,
          top: "bottom",
          bottom: "36",
          orient: "horizontal"
        },
        grid: {
          bottom: "20%",
          right: "0",
          left: "13%"
        },
        series: allData
      };
      if (barWidth < 5) {
        option.dataZoom[0].show = true;
        option.dataZoom[0].end = (20 / xLength) * 100;
      } else {
        option.dataZoom[0].show = false;
        option.dataZoom[0].end = 100;
      }
      var allOption = _.merge(option, this.option);
      this.$set(this, "dataOption", allOption);
    },
    setExchangeOption(res) {
      var barBorderRadius = this.option.barBorderRadius || [0, 0, 0, 0];
      var itemStartColor = this.option.startColor || barColor[0].startColor;
      var itemEndColor = this.option.endColor || barColor[0].endColor;
      var xData = [];
      var unit = "人";
      var data = {
        data: [],
        type: "bar",
        name: "",
        barWidth: 13,
        label: {
          show: true,
          normal: {
            show: true,
            position: "right",
            fontSize: "16",
            color: "#31cee6",
            fontFamily: "DIN Condensed Bold"
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius: barBorderRadius,
            color: !this.option.hideLineColor && {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                {
                  offset: 0,
                  color: itemStartColor
                },
                {
                  offset: 1,
                  color: itemEndColor
                }
              ])
            }
          }
        }
      };
      res.forEach(item => {
        var obj = {};
        const name = item.xData ? item.xData : item.name;
        obj.value = name;
        data.data.push(item.value);
        xData.push(obj);
      });
      var option = {
        xAxis: {
          type: "value",
          axisLabel: {
            rotate: 45,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        yAxis: {
          data: xData,
          type: "category",
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,209,255,0.2)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,0,0,0)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          formatter: params => this.$utils.formatterLine(res, params, unit)
        },
        grid: {
          top: "10%",
          right: "0",
          bottom: "20%"
        },
        series: [data]
      };
      var allOption = _.merge(option, this.option);
      this.$set(this, "dataOption", allOption);
    }
  }
};
</script>